<template>
  <div>
    <div
      v-show="keys.includes('scope.userInfo')"
      class="scope_item"
      @click="toDetail('userInfo')"
    >
      <span class="scope_text">用户信息</span>
      <img
        src="/onekit/black/right.png"
        style="height: 16px; width: 16px; margin-top: 17px"
        alt=""
      />
    </div>
    <div
      v-show="keys.includes('scope.userLocation')"
      class="scope_item"
      @click="toDetail('userLocation')"
    >
      <span class="scope_text">位置信息</span>
      <div style="display: flex">
        <span class="scope_text">{{locationText}}</span>
        <img
          src="/onekit/black/right.png"
          style="height: 16px; width: 16px; margin-top: 17px"
          alt=""
        />
      </div>
    </div>
    <div v-show="keys.includes('scope.camera')" class="scope_item">
      <div class="scope_text">摄像头</div>
      <onekit-switch
        :checked="scope['scope.camera']"
        class="scope_switch"
        @Change="camera_change"
      ></onekit-switch>
    </div>
    <div v-show="keys.includes('scope.record')" class="scope_item">
      <div class="scope_text">麦克风</div>
      <onekit-switch
        :checked="scope['scope.record']"
        class="scope_switch"
        @Change="record_change"
      ></onekit-switch>
    </div>
    <div v-show="keys.includes('scope.writePhotosAlbum')" class="scope_item">
      <div class="scope_text">相册</div>
      <onekit-switch
        :checked="scope['scope.writePhotosAlbum']"
        class="scope_switch"
        @Change="writePhotosAlbum_change"
      ></onekit-switch>
    </div>
  </div>
  <!-- <div>
    <div
      style="
        background-color: #ededed;
        width: calc(100% - 40px);
        height: 160px;
        position: absolute;
        bottom: 0;
        padding: 20px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      "
    >
      <div style="font-size: 14px">OnekitWX 申请</div>
      <div>
        <p style="font-size: 16px">获取你的位置信息</p>
        <p style="font-size: 14px; color: #767676">效果展示</p>
      </div>
      <div
        style="
          display: flex;
          flex-direction: row;
          justify-content: space-evenly;
        "
      >
        <button
          style="
            width: 90px;
            height: 30px;
            color: #06ae56;
            background-color: #fff;
            border-radius: 5px;
          "
        >
          拒绝
        </button>
        <button
          style="
            width: 90px;
            height: 30px;
            color: #fff;
            background-color: #06ae56;
            border-radius: 5px;
          "
        >
          允许
        </button>
      </div>
    </div>
  </div> -->
</template>
<script>
// import Vue from "vue";
export default {
  name: "onekit-opensetting",
  data() {
    return {
      scope: {},
      keys: [],
      locationText: "",
    };
  },
  created() {
    this.scope = JSON.parse(window.localStorage.getItem("scope"));
    this.keys = Object.keys(this.scope);
  },
  mounted() {
    if (this.scope["scope.userLocation"]) {
      this.locationText = "使用时";
    } else {
      this.locationText = "不允许";
    }
    if (this.scope["scope.userLocationBackground"]) {
      this.locationText = "使用时和离开后";
    }
  },
  methods: {
    camera_change(e) {
      this.scope["scope.camera"] = e.detail.value;
      localStorage.setItem("scope", JSON.stringify(this.scope));
    },

    record_change(e) {
      this.scope["scope.record"] = e.detail.value;
      localStorage.setItem("scope", JSON.stringify(this.scope));
    },

    writePhotosAlbum_change(e) {
      this.scope["scope.writePhotosAlbum"] = e.detail.value;
      localStorage.setItem("scope", JSON.stringify(this.scope));
    },

    toDetail(target) {
      this.$router.push({
        path: "/onekit/detailSetting",
        query: { target },
      });
    },
  },
};
</script>
<style>
.scope_item {
  margin: 0 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  height: 50px;
  border-bottom: 1px solid #f6f6f6;
}
.scope_text {
  line-height: 50px;
}
.scope_switch {
  margin-top: 7.5px;
}
</style>
